<template>
  <div>
    <h2 class="page-title ">用户新增</h2>
    <el-row>
       <el-col :xs="24" :sm="16" :md="8" :lg="6" :xl="6">
          <el-form 
            ref="myform" 
            :model="form" 
            label-width="80px"
            status-icon 
            class="myform"
            :rules="rules"
            label-position="top"
          >
            <el-form-item label="用户名" prop="username" >
              <el-input 
              prefix-icon="el-icon-user" 
              v-model="form.username"
              placeholder="请输入用户名"
              autocomplete="off"
              type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户权限"  prop="role">
              <el-select v-if="userInfo" class="rolese"  prefix-icon="el-icon-lock"   v-model="form.role" placeholder="请选择角色">
                <el-option
                  v-for="(item,index) in roleList"
                  :key="index"
                  :label="item.text"
                  :value="item.value"
                  v-show = "item.value < userInfo.role"
                >
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="手机号" prop="phone" >
              <el-input 
              prefix-icon="el-icon-phone-outline" 
              v-model="form.phone"
              placeholder="请输入手机号"
              autocomplete="off"
              type="text"
            ></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password" >
            <el-input 
            prefix-icon="el-icon-lock" 
            v-model="form.password"
            type="text"
            placeholder="请输入密码"
            autocomplete="off"
            disabled
          ></el-input>
          </el-form-item>

         
          <el-form-item>
            <el-button type="success" block  @click="addUserAction"  :loading="loading">新增用户</el-button>
            <el-button type="danger" block @click="resetData" >重置数据</el-button>
          </el-form-item>
        </el-form>
       </el-col>
    </el-row>
    
  </div>
</template>

<script>
import {reactive,toRefs,ref,computed} from "vue"
import {reg} from "@/utils/validate"
import {useStore} from "vuex"
import { toast } from '../../utils';
import { ajax } from '../../service';
import {useRouter} from "vue-router"
export default {
  name:"user-add",
  setup(){
    const myform = ref()
    const store = useStore()
    const router = useRouter()
    const userInfo = computed(()=>{
      return store.state.userInfo
    })
    const state = reactive({
      loading:false,
      form:{
          password:"abc123"
      },
      rules:{
         username:[
          { required: true, message: '请输入用户名', trigger: 'blur'}
        ],
         phone:[
           { required: true, message: '请输入手机号', trigger: 'blur'},
           { pattern: reg.phone ,message: '请输入有效的手机号', trigger: 'blur' }
        ],
          role:[
          { required: true, message: '请选择', trigger: 'blur'}
        ],
      }
    })
    const addUserAction = ()=>{
       myform.value.validate(async valid=>{
         if(valid){
          //  添加用户接口 
          const {code,result} = await ajax.adduser(state.form);
          if(code==200){
              router.push({name:"user-list"})
          }
         }else{
           toast.showError("请输入有效的信息")
         }
       })
    }
    const resetData = ()=>{
      myform.value.resetFields()
    }
    return {
      ...toRefs(state),
      myform,
      userInfo,
      resetData,
      addUserAction
    }
  }
}
</script>


<style lang="scss" scoped>
.rolese{
  width:100%;
}
</style>
